<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/7/6
  Time: 11:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>流转记录</title>
    <jsp:include page="/commons/common-js.jsp"></jsp:include>
</head>
<body>
<table class="layui-hide" id="grtable" lay-filter="grtable"></table>

<script type="text/html" id="serchtoolbar">
    <form class="layui-form layui-form-pane layui-inline" lay-filter="serchform">
        <label class="layui-form-label" style="width: 60px">id</label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="key" lay-verify="number"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline" id="date">
            <div class="layui-inline">时间选择</div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="startTime" name="startTime">
            </div>
            <div class="layui-inline">-</div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="endTime" name="endTime">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 150px">
                <select id="searchselect" name="game" style="height: auto" lay-filter="game">
                    <option></option>
                </select>
            </div>
        </div>

    </form>
    <button class="layui-btn layui-btn-sm" lay-event="serchbnt">搜索</button>


</script>


<script>
    layui.use(['table', 'form', 'laytpl', 'laydate'], function () {
        let table = layui.table,
            form = layui.form,
            layer = layui.layer,
            laytpl = layui.laytpl,
            laydate = layui.laydate,
            date = new Date();
        let tableins = table.render({
            elem: '#grtable'
            , url: '/goldrecord/all'
            , defaultToolbar: []
            , toolbar: '#serchtoolbar'
            , cols: [[
                {field: 'id', width: 100, title: 'id'}
                , {field: 'gid', width: 90, title: 'gid'}
                , {field: 'processStr', width: 90, title: '类型'}
                , {field: 'beforeNumber', width: 150, title: '转账前'}
                , {field: 'processNumber', width: 150, title: '金额'}
                , {field: 'goldNumber', width: 150, title: '转账后'}
                , {field: 'addTime', width: 200, title: '时间'}
            ]]
            , page: true
            , limits: [19, 50, 100]
            , limit: 19
            , height: '820',
        });


        let startTime = laydate.render({
            elem: '#startTime',
            max: 'date',
            type:'datetime',
            done: function (value, date) {
                endTime.config.min = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                };
                endTime.config.max = {
                    year: date.year,
                    month: date.month,
                    date: date.date,
                };
            }
        });

        let endTime = laydate.render({
            elem: '#endTime',
            max: 'date',
            type:'datetime',
            done: function (value, date) {
                startTime.config.max = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                };
                startTime.config.min = {
                    year: date.year,
                    month: date.month - 2,
                    date: date.date,
                };
            }
        });


        //头工具栏事件
        table.on('toolbar(grtable)', function (obj) {
            switch (obj.event) {
                case 'serchbnt' :
                    var data = form.val("serchform");
                    tableins.reload({
                        where: data
                    });

                    let startTime = laydate.render({
                        elem: '#startTime',
                        max: 'date',
                        type:'datetime',
                        done: function (value, date) {
                            endTime.config.min = {
                                year: date.year,
                                month: date.month - 1,
                                date: date.date,
                            };
                            endTime.config.max = {
                                year: date.year,
                                month: date.month,
                                date: date.date,
                            };
                        }
                    });

                    let endTime = laydate.render({
                        elem: '#endTime',
                        max: 'date',
                        type:'datetime',
                        done: function (value, date) {
                            startTime.config.max = {
                                year: date.year,
                                month: date.month - 1,
                                date: date.date,
                            };
                            startTime.config.min = {
                                year: date.year,
                                month: date.month - 2,
                                date: date.date,
                            };
                        }
                    });
                    break;
            }
        });

        //渲染游戏下拉列表
        $.ajax({
            url: '/game/query',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                //使用循环遍历，给下拉列表赋值
                $('#searchselect').append(new Option("全部", 0));// 下拉菜单里添加元素
                $.each(data.data, function (index, value) {
                    $('#searchselect').append(new Option(value.name, value.id));// 下拉菜单里添加元素
                });
                form.render("select");//重新渲染 固定写法
            }
        });
    })



</script>
</body>
</html>
